<template>
  <div id="app">
    <router-view />
    <!-- <el-button @click="change" type="text">{{ text }}</el-button>
    <component :is="current"></component> -->
    <test :curComp.sync="component" v-if="component" :id="id"></test>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Test from './components/Test.vue'
import Test from '@/views/Test.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld,
    Test
  },
  data() {
    return {
      current: 'HelloWorld',
      component: '',
      id: null
    }
  },
  computed: {
    text() {
      if (this.current === 'HelloWorld') {
        return '切换为右键菜单'
      } else {
        return '切换为普通菜单'
      }
    }
  },
  methods: {
    change() {
      if (this.current === 'HelloWorld') {
        this.current = 'Test'
      } else {
        this.current = 'HelloWorld'
      }
    }
  },
  created () {
    this.$bus.$on('detail', (data) => {
      this.component = data.type
      this.id = data.id
    })
  },
  beforeDestroy () {
    this.$bus.$off('detail')
  },

}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
html, body, #app {
  width: 100%;
  height: 100%;
}
</style>
